<template>
	<view class="order-item">
		<!-- 左边 -->
		<view class="left">
			<!-- 如果是可以勾选的 -->
			<view v-if="msg.status === 1 || !msg.status" @click="selectCheckBox" class="iconbox" style="margin-top: 5rpx;">
				<image src="/static/images/maintain/checkbox@2x.png" v-if="selectedList.includes(msg.id)"></image>
				<view class="empty" v-else></view>
			</view>
			<!-- 如果是已经标记过的 -->
			<view v-else class="iconbox" @click="changeType">
				<image
					v-if="Object.keys(msg).length"
					:src="'/static/images/maintain/' + msg.status.toString() + '.png'"
					mode=""
					style="width: 48rpx;height: 48rpx;"
				></image>
			</view>
		</view>
		<view class="right" :style="{ borderBottom: isLast ? '' : '2rpx solid #e9e9e9' }">
			<view class="right_top">
				<view class="right_left">
					<view :class="['title_place']">
						<view>{{ msg.checkContent }}</view>
						<!-- <uni-icons color="#999" size="14" type="arrowdown" v-if="checkContentFlag" @click="showFlag=!showFlag"/> -->
					</view>
					<view class="content">{{ msg.checkDesc }}</view>
					<view v-if="msg.checkGuides.length">
					 <view class="guide_video" @click="handlePreview(item)" v-for="(item,index) in msg.checkGuides" :key="index">
							<view class="name">
								<image src="/static/images/maintain/play.png">
									
								</image>
								<view class="name_item">
									{{'作业指引:'+item.name}}
								</view>
								
							</view>
							<view>
								<uni-icons color="#666" size="14" type="arrowright" />
							</view>
						</view>
					</view>
					
				</view>
				<view class="zxj" @click.stop="box2event" v-if="Object.keys(msg).length">
					<view v-if="(msg.status == 3 || msg.status == 4)
						&&!msg.recordVOS.length&&msg.updateUser==userinfo.user_id" class="noFinish">未完成
					</view>
					<view v-if="msg.orderStatus !== 4">
						<image src="/static/images/maintain/zxj.png" 
						mode="" v-if="!shoWRedDot&&msg.status!==1"></image>
						<image src="/static/images/maintain/zxj2.png"
						mode="" v-if="shoWRedDot&&msg.status!==1"></image>
					<!-- 	<image src="/static/images/maintain/zxj.png" mode="" v-if="msg.status == 2||(msg.status == 3 || msg.status == 4)
						&&(msg.recordVOS.length||!msg.recordVOS.length)"></image>
						<image src="/static/images/maintain/zxj2.png" mode="" v-if="(msg.status == 3 || msg.status == 4)
						&&!msg.recordVOS.length&&msg.updateUser==userinfo.user_id"></image> -->
					</view>
				</view>
			</view>

			<view v-if="msg.recordVOS.length">
				<view class="right_bottom" v-for="(item, index) in msg.recordVOS" :key="index" @click="showDes(item)">
					<view class="right_bottom-left">
						<view class="des" v-if="item.imgUrl.length">	
						<image src="/static/images/maintain/add.png" mode="" style="width: 24rpx;height: 24rpx;"></image>	
						<text style="color: #333;">{{ item.userName }}</text>
							上传了	
						<text style="color: #0091FF;">{{ item.imgUrl.length + '张' }}</text>
							图片描述
						</view>	
					<view class="des" v-else>
							<image src="/static/images/maintain/add.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
							<text style="color: #333;">{{ item.userName }}</text>
							上传了备注描述
					</view>
						<view class="time">{{ item.updateTime }}</view>
					</view>
					<view class="right_bottom-right" 
					@click.stop="handleDel(item)" 
					v-if="(msg.orderStatus==2&&msg.userOperation&&item.userId === userinfo.user_id)">...</view>
				</view>
			</view>
		</view>
		<!-- 编辑照相机 -->
		<!-- <uni-popup ref="popup" type="bottom">
			<work-record 
			:check-history-id="msg.id" 
			:is-edit="isEdit" 
			:order-status="msg.orderStatus"
			:user-operation="msg.userOperation"
			:des-msg="recordVOS" @addRecord="addRecord"></work-record>
		</uni-popup> -->
		<!-- <uni-popup ref="previewwGuide" type="center">
			<preview-guide @close="$refs.previewwGuide.close()" :guideData="guideData"></preview-guide>
		</uni-popup> -->
	</view>
</template>

<script>
// import unipopup from '@/components/uni-popup/uni-popup';
// import WorkRecord from './work-record.vue';
import { mapState, mapActions } from 'vuex';
import { delRecord } from '@/apis/maintains.js';
import { valueInArr } from '@/utils/utils.js';
export default {
	props: {
		msg: {
			type: Object
		},
		selectedList: {
			type: Array
		},
		// 是否数组最后一项,去除下划线
		isLast: {
			type: Boolean
		}
	},
	components: {
		// unipopup,
		// WorkRecord,
		// PreviewGuide
	},
	data() {
		return {
			recordVOS: {},
			valueInArr:valueInArr,
			showFlag: true, // 默认true显示一行,false显示多行
			isEdit: false ,// 默认新增
			guideData:{}
		};
	},
	created() {},
	computed: {
		...mapState('user', ['userinfo']),
		shoWRedDot() {
			let flag = false;
			// 如果是自己的且未上传图片 展示红点
			if ((this.msg.status == 3 || this.msg.status == 4) && !this.msg.recordVOS.length
			&& this.msg.updateUser == this.userinfo.user_id) {
				flag = true;
			}
			// 如果不是自己的没上传图片 展示正常照相机
			if ((this.msg.status == 3 || this.msg.status == 4) && this.msg.updateUser !== this.userinfo.user_id) {
				flag = false;
			}
			if (this.msg.status == 2) {
				flag = false;
			}
			return flag;
		}
	},
	methods: {
		handlePreview(item) {
			// this.$refs.previewwGuide.open();
			// this.guideData=item
			this.$emit('previewGuide',item);
		},
		// 判断工单状态
		checkOrderStatus() {
			let flag = true;
			// 如果是待开始不可以操作||如果工单是进行中,当前用户未签到
			if (this.msg.orderStatus === 1
			|| this.msg.orderStatus === 2 && !valueInArr(this.msg.signUsers,this.userinfo.user_id)) {
				uni.showToast({
					title: '请先签到',
					icon: 'none'
				});
				flag = false;
			} 
			// 如果已经签退过也不可操作
			else if (!this.msg.userOperation) {
				uni.showToast({
					title: '你已签退,不可再操作',
					icon: 'none'
				});
				flag = false;
			}
		    return flag;
		},
		selectCheckBox() {
			// 如果this.checkOrderStatus
		    if (!this.checkOrderStatus()) {
		    	return; 
		    } else {
				this.$emit('select', { id: this.msg.id });
			}
		},
		// 改变标记
		changeType() {
			// 1=可以勾选
			// 2=正常
			// 3保养
			// 4异常
			if (!this.checkOrderStatus()) {
				return; 
			} else {
				let list = [];
				// 状态为正常
				if (this.msg.status === 2) {
					list = ['更改为保养', '更改为异常'];
				}
				// 状态为保养
				else if (this.msg.status === 3) {
					list = ['更改为正常', '更改为异常'];
				}
				// 状态为异常
				else {
					list = ['更改为正常', '更改为保养'];
				}
				uni.showActionSheet({
					itemList: [...list, '取消标记'],
					success: ({ tapIndex }) => {
						let status = 0;
						// 取消标记操作
						if (tapIndex === 2) {
							status = 1;
						} else {
							// 如果是正常点击更改
							if (this.msg.status === 2) {
								status = tapIndex + 3;
							} else if (this.msg.status === 3) {
								if (tapIndex == 0) {
									status = 2;
								} else {
									status = 4;
								}
							} else {
								status = tapIndex + 2;
							}
						}
						this.$emit('changeStatus', { status, id: this.msg.id });
					}
				});
			}
		},
		// 查看详情编辑
		showDes(item) {
			this.isEdit = true;
			// this.recordVOS = item;
			// this.$refs.popup.open();
			this.$emit('showWorkRecord',{isEdit:this.isEdit,recordVOS:item,id:this.msg.id});
		},
		// 点击照相机新增
		box2event() {
			if (this.msg.orderStatus === 4) {
				return false;
			}
			if (!this.checkOrderStatus()) {
				return; 
			}
			// console.log(this.msg.recordVOS)
			this.isEdit = false;
			this.recordVOS.imgUrl = [];
			this.recordVOS.checkDesc = ''; 
			this.$emit('showWorkRecord',{isEdit:this.isEdit,recordVOS:this.recordVOS,id:this.msg.id});
		},
		addRecord() {
			this.$refs.popup.close();
			this.$emit('addRecord');
		},
		// 删除评论
		handleDel(res) { 
			if (!this.checkOrderStatus()) {
				return;
			} else {
				uni.showActionSheet({
					itemList: ['删除'],
					success: ({ tapIndex }) => { 
						if (res.userId === this.userinfo.user_id) {
							// console.log('可以删除')
							delRecord({ ids: res.id }).then(res => {
								if (res) {
									this.$emit('addRecord');
								}
							});
						} else {
							uni.showToast({
								title: '非本人不可删除',
								icon: 'none'
							});
							return;
						}
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.order-item {
	padding: 38rpx 0 0rpx 0;
	display: flex;
	.aa {
		display: flex;
		flex-wrap: nowrap;
	}
	.left {
		.iconbox {
			width: 74rpx;
			// padding-right: 24rpx;
			display: flex;
			justify-content: center;
			height: 100%;
		}
		image {
			width: 30rpx;
			height: 30rpx;
			// padding-right: 26rpx;
		}
		.empty {
			width: 30rpx;
			height: 30rpx;
			border: 1rpx solid #999;
			margin-left: 1rpx;
			// box-sizing: border-box;
			// padding-right: 26rpx;
		}
	}
	.right {
		.right_top {
			display: flex;
		}
		.right_bottom {
			display: flex;
			margin-top: 20rpx;
			color: #999;
			.right_bottom-left {
				width: 480rpx;
				display: flex;
				flex-direction: column;
				.des {
					display: flex;
					align-items: center;
					image {
						margin-right: 12rpx;
						margin-top: 2rpx;
					}
				}
				.time {
					font-size: 24rpx;
					margin-left: 36rpx;
				}
			}
			.right_bottom-right {
				display: flex;
				flex: 1;
				justify-content: flex-end;
				font-size: 40rpx;
			}
		}
		display: flex;
		flex: 1;
		flex-direction: column;
		padding-bottom: 40rpx;
		// border-bottom: 2rpx solid #e9e9e9;
		font-size: 24rpx;
		margin-left: 10rpx;
		// flex-direction: column;
		.right_left {
			width: 480rpx;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			.title_place {
				color: #333;
				font-size: 28rpx;
				padding-bottom: 8rpx;
				display: flex;
				flex-direction: column;
			}
			.content {
				font-size: 24rpx;
				color: #999;
			}
			.guide_video{
				margin-top: 14rpx;
				width: 508rpx;
				background-color:#EDF2F6 ;
				padding: 4rpx 8rpx;
				color: #666666;
				display: flex;
				justify-content: space-between;
				.name{
					display: flex;
					align-items: center;
					width: 436rpx;
                    .name_item{
						flex: 1;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
				image{
					width: 20rpx;
					height: 20rpx;
					margin-right: 8rpx;
				}
			}
		}
		.zxj {
			display: flex;
			flex: 1;
			align-items: flex-end;
			flex-direction: column;
			// justify-content: flex-end;
			.noFinish{
				margin-bottom: 8rpx;
				width: 72rpx;
				// height: 24rpx;
				background: #0091ff;
				border-radius: 12rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 2rpx;
			}
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
		// .title {
		// 	display: flex;
		// 	justify-content: space-between;
		// 	color: #333333;
		// 	font-size: 28rpx;
		// 	padding-bottom: 8rpx;

		// }
	}

	// .top {
	// 	display: flex;
	// 	align-items: center;
	// 	padding-bottom: 10rpx;
	// 	height: 48rpx;
	// 	image {
	// 		width: 30rpx;
	// 		height: 30rpx;
	// 		// padding-right: 26rpx;
	// 		padding-top: 20rpx;
	// 	}
	// 	.iconbox{
	// 		width: 64rpx;
	// 		padding-left: 14rpx;
	// 	}
	// 	.empty {
	// 		width: 30rpx;
	// 		height: 30rpx;
	// 		border: 1rpx solid #999;
	// 		box-sizing: border-box;
	// 		// padding-right: 26rpx;
	// 	}
	// 	.content {
	// 		color: #333333;
	// 		font-size: 28rpx;
	// 		// margin-left: 26rpx;
	// 		width: 480rpx;

	// 		display: flex;
	// 		flex-wrap: wrap;
	// 	}
	// 	.zxj{
	// 		display: flex;
	// 		flex: 1;
	// 		justify-content: flex-end;
	// 		image{
	// 			width: 40rpx;
	// 			height: 40rpx;
	// 		}
	// 	}
	// }
	// .bottom {
	// 	margin-left: 64rpx;
	// 	// margin-top: 8rpx;
	// 	padding-bottom: 40rpx;
	// 	border-bottom: 2rpx solid #e9e9e9;
	// 	font-size: 24rpx;
	// 	color: #999;
	// 	// width: 480rpx;
	// 	display: flex;
	// 	flex-wrap: wrap;
	// }
}
</style>
<style></style>
